import React, { useState, useEffect } from 'react'
import { ZoomInOutlined } from '@ant-design/icons';
import "./style.css"
const Index: React.FC = () => {
  const [showButton, setShowButton] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 140) { // 根据实际情况调整阈值
        setShowButton(true);
      } else {
        setShowButton(false);
      }
    };
    document.addEventListener('scroll', handleScroll);

    // 清理事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [])

  const buttonStyle = {
    display: showButton ? 'block' : 'none',
  };

  return (
    <div className='boxagc'>
      <div className='inpa' style={buttonStyle}>
        <div>
          <ZoomInOutlined />
          <input type="text" placeholder='2个以及上关键词描述你想要的设计' />
         
        </div>
      </div>
    </div>
  )
}

export default Index
